<template>
  <CustomNav title="时光锦汉服体验店"></CustomNav>
  <view class="container">
    <view class="allOrder">
      <view>已选套餐</view>
      <view>{{ shopIdName() }}</view>
    </view>

    <view class="orderContent">
      <view class="order">
        <view class="info">
          <view class="left">
            <u-image
              :show-loading="true"
              src="https://img1.baidu.com/it/u=1098307165,1560600932&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800"
              width="160rpx"
              height="160rpx"
            ></u-image>
            <view class="basicInfo">
              <view class="top">
                <view class="name">
                  <view
                    >{{ appointmentStore.appointmentService }}+装造+摄影</view
                  >
                  <view>￥169.0</view>
                </view>
                <view class="count">X1</view>
              </view>
              <view class="quantity"
                >{{ appointmentStore.appointmentQuantity }}人</view
              >
            </view>
          </view>
        </view>
        <view class="btn">
          <!-- <view class="viewOrder" @click="cancelOrder">取消订单</view> -->
          <view class="recur" @click="handleRecur">再次预约</view>
        </view>
      </view>
    </view>

    <view class="recommendContainer">
      <view class="title">为你推荐</view>
      <view class="recommend">
        <view
          class="row"
          v-for="(item, index) in recommendList"
          :key="index"
          @click="handleViewDetails(item.id)"
        >
          <view class="img">
            <u-image
              :show-loading="true"
              :src="item.poster"
              radius="10rpx"
              width="200rpx"
              height="200rpx"
            ></u-image>
          </view>
          <view class="name">{{ item.title }}</view>
          <!-- <view class="style">{{ item.introduce }}</view> -->
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import CustomNav from "@/components/CustomNav/index.vue";
import useAppointmentStore from "@/store/modules/appointment";
import { Alert, shopIdName } from "@/utils/tool";
import { recommendForYou } from "@/api/guestFilm";
import { getItem } from "@/utils/localStorage";

const appointmentStore = useAppointmentStore();

console.log("appointmentStore：", appointmentStore);

const cancelOrder = () => {
  console.log("app");
  appointmentStore.deleteFinally();

  Alert("取消订单成功", "success", 1000, true);

  setTimeout(() => {
    uni.switchTab({
      url: "/pages/index/index",
    });
  }, 1000);
};

// 再次预约
const handleRecur = () => {
  uni.navigateTo({
    url: "/pagesA/appointment/index",
  });
};

// 为你推荐
const recommendList = ref([
  {
    id: 1,
    url: "https://img2.baidu.com/it/u=1431194694,3484846051&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=1081",
    dynasty: "汉朝",
    introduce: "大唐公主",
  },
  {
    id: 2,
    url: "https://img2.baidu.com/it/u=1838808597,428946688&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=666",
    dynasty: "汉朝",
    introduce: "桃花仙子",
  },
  {
    id: 3,
    url: "http://t14.baidu.com/it/u=1019123068,3761531923&fm=224&app=112&f=JPEG?w=500&h=500",
    dynasty: "汉朝",
    introduce: "荷花花神",
  },
  {
    id: 4,
    url: "https://img1.baidu.com/it/u=3808988148,2252383111&fm=253&fmt=auto&app=138&f=JPEG?w=369&h=499",
    dynasty: "汉朝",
    introduce: "大唐不夜城",
  },
  {
    id: 5,
    url: "https://img1.baidu.com/it/u=3762686635,1504830611&fm=253&fmt=auto&app=138&f=JPEG?w=334&h=500",
    dynasty: "汉朝",
    introduce: "桃方梦",
  },
  {
    id: 6,
    url: "https://img2.baidu.com/it/u=2266404654,2071591797&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=639",
    dynasty: "汉朝",
    introduce: "月宫仙子",
  },
]);

onMounted(async () => {
  const result = await recommendForYou(1, 1);
  console.log("推荐:", result);

  recommendList.value = result.data.data;
});

// 查看照片详情
const handleViewDetails = (id) => {
  uni.navigateTo({
    url: `/pagesB/photoDetails/index?id=${id}`,
  });
};
</script>
<script>
export default {
  name: "",
};
</script>

<style lang="scss" scoped>
.container {
  background-color: #efefef;
  min-height: 88vh;
  padding: 0 30rpx;
  padding-bottom: 40rpx;

  .allOrder {
    display: flex;
    justify-content: space-between;
    padding-top: 50rpx;

    view {
      font-size: 28rpx;
      font-weight: 700;
    }
  }

  .orderContent {
    margin-top: 50rpx;

    .order {
      margin-top: 20rpx;

      .info {
        display: flex;

        .left {
          width: 100%;
          display: flex;
          justify-content: space-between;

          .basicInfo {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            flex: 1;
            margin-left: 10rpx;

            .top {
              display: flex;
              flex-direction: column;

              .name {
                display: flex;
                flex: 1;
                justify-content: space-between;

                view {
                  font-size: 28rpx;
                }
              }

              .count {
                display: flex;
                justify-content: flex-end;
                font-size: 26rpx;
                margin-top: 10rpx;
              }
            }

            .quantity {
              font-size: 28rpx;
              margin-bottom: 10rpx;
            }
          }
        }
      }

      .btn {
        display: flex;
        justify-content: flex-end;

        view {
          color: #fff;
          font-size: 24rpx;
          border-radius: 20rpx;
          padding: 8rpx 25rpx;
        }

        .viewOrder {
          background-color: #bbbbbb;
        }

        .recur {
          background-color: $btn;
          margin-left: 25rpx;
        }
      }
    }
  }

  .recommendContainer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;

    .title {
      text-align: center;
      font-size: 30rpx;
      font-weight: 500;
      margin-bottom: 20rpx;
    }

    .recommend {
      display: flex;
      flex-wrap: wrap;
      background-color: #fff;
      padding: 40rpx 20rpx 100rpx;

      .row {
        width: 33%;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
        // border: 1px solid red;
        margin-bottom: 20rpx;

        .img {
        }
        .name {
          font-size: 24rpx;
        }
        .style {
          font-size: 24rpx;
        }
      }
    }
  }
}
</style>
